<script setup lang="ts">
import { ref } from 'vue'
import post from '../../lib/post'
import { Search } from '@element-plus/icons-vue' //导入图标
import Detail from './DetailIndex.vue' // 引入详情弹窗
import { ElMessageBox } from 'element-plus'
let list = ref([]) //列表
const pageNo = ref(0) //页数
const pageSize = ref(10) //页距
const total = ref(0) //总条数
const detailRef = ref() // 详情弹窗的引用

const search = ref('') //搜索关键字
const AUTHORITIES = {
  // 一般常量使用大写
  0: '查看人员',
  1: '管理人员',
  2: '查看角色',
  3: '管理角色',
  4: '查看组织',
  5: '管理组织',
  6: '查看商品',
  7: '管理商品',
  8: '查看自提点',
  9: '管理自提点',
}

const getList = async () => {
  const data: any = await post('/list/member', {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    search: search.value,
  })
  if (!data.success) {
    return alert(data.message)
  }
  list.value = data.result.list
  total.value = data.result.total
}

const onPageChange = (page: number) => {
  pageNo.value = page - 1
  getList()
}
const handleSizeChange = (sizes: number) => {
  pageNo.value = 0
  pageSize.value = sizes
  getList()
}
const refreshList = () => {
  // 刷新列表
  pageNo.value = 0
  list.value = []
  getList() // 重新拉取列表
}
const handleEdit = (index: number, row: any) => {
  // console.log(index,row);
  detailRef.value.showModify(index, row)
}

// 删除
const handleDelete = async (index: number, row: any) => {
  // console.log(index,row);
  const flag = await ElMessageBox.confirm('是否确认删除？')
  if (flag !== 'confirm') {
    return
  }

  const data: any = await post('/remove/member', { id: row.id })
  if (!data.success) {
    return ElMessageBox.alert(data.message)
  }
  ElMessageBox.alert('删除成功')
  refreshList()
}

const exportExcel = () => {
  // 去下载文件
  // 创建新的隐藏的可点击元素
  const element = document.createElement('a')

  // 给这个元素设置‘href’属性，以指向你想下载的文件
  element.setAttribute(
    'href',
    `http://localhost:5188/excel/member?filename=人员表`
  )

  // 隐藏该元素
  element.style.display = 'none'
  document.body.appendChild(element)

  // 模拟点击这个元素
  element.click()

  // 清理 - 从 DOM 中删除元素
  document.body.removeChild(element)
}

getList()
</script>

<template>
  <div class="bigBox">
    <div class="top">
      <div class="search">
        <div class="mt-4">
          <el-input
            v-model="search"
            placeholder="请输入搜索内容"
            class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="getList()" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="addContent">
        <el-button type="primary" @click="detailRef.showCreate()"
          >新增</el-button
        >
        <el-button type="primary" @click="exportExcel()">导出excel</el-button>
      </div>
    </div>
    <div class="bigBox">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="head" label="头像" width="auto">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.head"
              :preview-src-list="[scope.row.head]"
              preview-teleported
              fit="cover"
              lazy
            />
          </template>
        </el-table-column>
        <el-table-column prop="authority" label="角色权限">
          <template #default="scope">
            {{ scope.row.authority?.map((o) => AUTHORITIES[o]).join('；') }}
          </template>
        </el-table-column>
        <el-table-column prop="native" label="籍贯">
          <template #default="scope">
            {{
              (scope.row.native?.province || '') +
              (scope.row.native?.district || '')
            }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="Id" width="auto" />
        <el-table-column prop="name" label="Name" width="auto" />
        <el-table-column prop="createTime" label="Time" width="auto" />
        <el-table-column prop="phone" label="Phone" width="auto" />
        <el-table-column prop="password" label="Password" width="auto" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pageControl">
        <el-pagination
          background
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="onPageChange"
          :page-sizes="[5, 10, 15, 20]"
        />
      </div>
    </div>
  </div>
  <Detail ref="detailRef" @refreshList="refreshList"></Detail>
</template>

<style scoped>
.bigBox {
  width: 100%;
}

.top {
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  align-items: center;
  background-color: #f3f3f3;
}

.input-with-select {
  width: 300px;
}

.bigBox {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pageControl {
  margin: 40px auto;
}
</style>
